<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <Loading v-if="loading">Loading...</Loading>
      <div v-else class="host-body">
        <div class="d-flex jc-center">
          <decoration-10 class="dv-dec-10" />
          <div class="d-flex jc-center">
            <decoration-8 class="dv-dec-8" :color="decorationColors" />
            <div class="title">
              <span class="title-text">{{ title }}</span>
              <decoration-6 class="dv-dec-6" :reverse="true" :color="['#50e3c2', '#67a1e5']" />
            </div>
            <decoration-8 class="dv-dec-8" :reverse="true" :color="decorationColors" />
          </div>
          <decoration-10 class="dv-dec-10-s" />
        </div>
        <!-- 第二行 -->
        <div class="d-flex jc-between px-2">
          <div class="d-flex aside-width">
            <div class="react-left ml-4 react-l-s">
              <span class="react-before"></span>
              <span class="text">{{ subtitle[0] }}</span>
            </div>
            <div class="react-left ml-3">
              <span class="text">{{ subtitle[1] }}</span>
            </div>
          </div>
          <div class="d-flex aside-width">
            <div class="react-right bg-color-blue mr-3">
              <span class="text fw-b">{{ subtitle[2] }}</span>
            </div>
            <div class="react-right mr-4 react-l-s">
              <span class="react-after"></span>
              <span class="text">
                {{ timeInfo.dateYear }} {{ timeInfo.dateWeek }}
                {{ timeInfo.dateDay }}
              </span>
            </div>
          </div>
        </div>

        <div class="body-box">
          <!-- 第三行数据 -->
          <div class="content-box">
            <div>
              <border-box-12>
                <center-left1 />
              </border-box-12>
            </div>
            <div>
              <border-box-12>
                <center-left2 />
              </border-box-12>
            </div>
            <!-- 中间 -->
            <div>
              <center />
            </div>
            <!-- 中间 -->
            <div>
              <center-right1 />
            </div>
            <div>
              <border-box-13>
                <center-right2 />
              </border-box-13>
            </div>
          </div>

          <!-- 第四行数据 -->
          <div class="bototm-box">
            <border-box-13>
              <bottom-left />
            </border-box-13>
            <border-box-12>
              <bottom-right />
            </border-box-12>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, onUnmounted } from 'vue';
import { formatTime } from '@/utils/index';
import { Loading, Decoration10, Decoration6, Decoration8, BorderBox12, BorderBox13 } from '@kjgl77/datav-vue3';
import useDraw from '@/utils/useDraw';
import { title, subtitle, WEEK } from './constant/index';
import CenterLeft1 from './components/centerLeft1/index.vue';
import CenterLeft2 from './components/centerLeft2/index.vue';
import Center from './components/center/index.vue';
import CenterRight1 from './components/centerRight1/index.vue';
import CenterRight2 from './components/centerRight2/index.vue';
import BottomLeft from './components/bottomLeft/index.vue';
import BottomRight from './components/bottomRight/index.vue';
// * 颜色
const decorationColors = ['#568aea', '#000000'];
// * 加载标识
const loading = ref<boolean>(true);
// * 时间内容
const timeInfo = reactive({
  setInterval: 0,
  dateDay: '',
  dateYear: '',
  dateWeek: '',
});
// * 适配处理
const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw();

// 生命周期
onMounted(() => {
  cancelLoading();
  handleTime();
  windowDraw();
  calcRate();
});

// 处理 loading 展示
const cancelLoading = () => {
  setTimeout(() => {
    loading.value = false;
  }, 500);
};

// todo 处理时间监听
const handleTime = () => {
  timeInfo.setInterval = setInterval(() => {
    const date = new Date();
    timeInfo.dateDay = formatTime(date, 'HH: mm: ss');
    timeInfo.dateYear = formatTime(date, 'yyyy-MM-dd');
    timeInfo.dateWeek = WEEK[date.getDay()];
  }, 1000);
};

onUnmounted(() => {
  unWindowDraw();
  clearInterval(timeInfo.setInterval);
});
</script>

<style lang="scss" scoped>
#index {
  color: #d3d6dd;
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
  .bg {
    width: 100%;
    height: 100%;
    padding: 16px 16px 0 16px;
    background-image: url('./img/pageBg.png');
    background-size: cover;
    background-position: center center;
  }
  .host-body {
    .dv-dec-10,
    .dv-dec-10-s {
      width: 33.3%;
      height: 5px;
    }
    .dv-dec-10-s {
      transform: rotateY(180deg);
    }
    .dv-dec-8 {
      width: 200px;
      height: 50px;
    }
    .title {
      position: relative;
      width: 500px;
      text-align: center;
      background-size: cover;
      background-repeat: no-repeat;

      .title-text {
        font-size: 24px;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%);
      }

      .dv-dec-6 {
        position: absolute;
        bottom: -30px;
        left: 50%;
        width: 250px;
        height: 8px;
        transform: translate(-50%);
      }
    }
    // 第二行
    .aside-width {
      width: 40%;
    }
    .react-r-s,
    .react-l-s {
      background-color: #0f1325;
    }

    // 平行四边形
    .react-right {
      &.react-l-s {
        text-align: right;
        width: 500px;
      }
      font-size: 18px;
      width: 300px;
      line-height: 50px;
      text-align: center;
      transform: skewX(-45deg);

      .react-after {
        position: absolute;
        right: -25px;
        top: 0;
        height: 50px;
        width: 50px;
        background-color: #0f1325;
        transform: skewX(45deg);
      }

      .text {
        display: inline-block;
        transform: skewX(45deg);
      }
    }

    .react-left {
      &.react-l-s {
        width: 500px;
        text-align: left;
      }
      font-size: 18px;
      width: 300px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      transform: skewX(45deg);
      background-color: #0f1325;

      .react-before {
        position: absolute;
        left: -25px;
        top: 0;
        height: 50px;
        width: 50px;
        background-color: #0f1325;
        transform: skewX(-45deg);
      }

      .text {
        display: inline-block;
        transform: skewX(-45deg);
      }
    }

    .body-box {
      margin-top: 16px;
      display: flex;
      flex-direction: column;

      //下方区域的布局
      .content-box {
        display: grid;
        grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
      }

      // 底部数据
      .bototm-box {
        margin-top: 10px;
        display: grid;
        grid-template-columns: repeat(2, 50%);
      }
    }
  }
}
</style>
